<template>
	<view>

	<view class="u-flex-col items-center justify-center group_2" v-if="isMine">
				<view class=" ">
				  <text class="text_1">{{(message.time-currentTime)<60?$u.timeFormat(message.time, 'hh:MM'):$u.timeFormat(message.time, 'mm月dd日  hh:MM')}}</text>
			
				</view>
				<view class="u-flex right group_5">
					<view class="flex-col ">
					  <view class="flex-col text-wrapper">
					    <text class="text_3">
					     {{message.payload.text}}
					    </text>
					  </view>
					  <text class="text_4">{{message.isPeerRead?'已读':'未读'}}</text>
					</view>
					<image
					  :src="message.avatar?message.avatar:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868227394160305.png'"
					  class="image_1 image_2"
					/>
				</view>
		  
		    </view>
		    <view class="flex-col group_4" v-else >
		      <text class="text_5" >{{(message.time-currentTime)<60?$u.timeFormat(message.time, 'hh:MM'):$u.timeFormat(message.time, 'mm月dd日  hh:MM')}}</text>
		      <view class="flex-row group_5 u-m-l-20">
		        <image
		           :src="message.avatar?message.avatar:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868226658952161.png'"
		          class="image_1"
		        />
		        <view class="flex-col group_6">
		          <text class="text_6">{{message.nick}}</text>
		          <view class="flex-col text-wrapper_1"><text class="text_7">{{message.payload.text}} </text></view>
		        </view>
		      </view>
		     
		    </view>

	</view>
</template>

<script>
	import { parseText } from '@/static/js/tim/base/message-facade';
	export default {
		name:"shop-tim-text-message",
		props: {
			message: {
				type: Object
			},
			isMine: {
				type: Boolean,
				default: true
			}
		},
		mounted() {
			console.log('message');
		  console.log(this.message);	
		},
	
		data() {
			return {
				currentTime:parseInt(new Date().getTime()/1000)
			};
		}
	}
</script>

<style lang="scss">
  .image_1 {
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
  }

 .right{
 	     width: 100%;
 	     display: flex;
 	     justify-content: flex-end;
 	     padding-right: 40rpx; 
 		 margin-top: 20rpx;
 }

  page{
	  background-color: #f2f2f2ff; 
  }
  .page {
    background-color: #f2f2f2ff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
  }
  .group {
    padding-top: 43rpx;
    flex: 1 1 auto;
    overflow-y: auto;
  }

 
  .text_1 {
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_2 {
    margin-left: 10.5rpx;
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_3 {
    width: 461rpx;
  }
  .image_2 {
    margin-left: 23rpx;
  }
  .text_5 {
    align-self: center;
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_5 {
    margin-top: 40rpx;
  }
 


  .group_6 {
    margin-left: 24rpx;
  }

 

  .text_3 {
  
    color: #ffffff;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
    text-align: left;
	display: flex;
	    flex-wrap: wrap;
	    max-width: 490rpx;
	    line-height: 44rpx;
  }
  .text_6 {
    align-self: flex-start;
    color: #666666;
    font-size: 20rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 23rpx;
  }
  .text-wrapper_1 {
    margin-top: 17rpx;
    padding: 10rpx  16rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
  }
 .text_7 {
    
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
   
  }
  .text-wrapper {
	margin-top: 17rpx;
    padding: 10rpx 16rpx;
    background-color: #1d6aff;
    border-radius: 16rpx;
  }
  .text_4 {
  
    align-self: flex-end;
    color: #999999;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
  
  }
</style>